<template>
    <el-container>
        <el-container>
            <el-header>
                <div style="display: flex;flex-direction:row;justify-content: space-between;align-items: center">
                    <div style="display: flex;flex-direction:row;align-items: center;padding-top: 5px">
                        <el-input
                                :placeholder="$t('lang.taskInputQuery')"
                                v-model="queryValue"
                                prefix-icon="el-icon-search"
                                size="small">
                        </el-input>
                        <el-button type="primary" size="mini"
                                   style="height: 30px !important;;width: 80px !important;margin-left: 10px"
                                   @click="recordChange()">{{$t('lang.taskQuery')}}
                        </el-button>
                        <el-button size="mini" style="height: 30px !important;margin-right: 10px" @click="resetChange">
                            {{$t('lang.taskReset')}}
                        </el-button>
                    </div>
                    <div style="display: flex;flex-direction:row;align-items: center;padding-top: 5px">
                        <el-button plain size="mini" icon="el-icon-download"
                                   style="height: 30px !important;margin: 2px 10px 0 0 "
                                   @click="downloadExcel">{{$t('lang.downloadExcel')}}
                        </el-button>

                        <el-button type="primary" size="mini"
                                   style="height: 30px !important;margin: 2px 10px 0 0 "
                                   @click="groupSend">{{$t('lang.groupSendText')}}
                        </el-button>
                        <el-upload
                                :action="uploadUrl"
                                multiple
                                ref="upload"
                                name="excelFile"
                                :data="uploadData"
                                :headers="uploadHeader"
                                :limit="1"
                                :show-file-list="false"
                                :on-exceed="handleExceed"
                                :on-error="handleError"
                                :on-success="handleSuccess"
                                :file-list="fileList">
                            <el-button icon="el-icon-plus" size="mini"
                                       style="height: 30px !important;margin-right: 10px">
                                {{$t('lang.taskImportTask')}}
                            </el-button>
                        </el-upload>
                    </div>

                </div>

                <Modal v-model="groupSendDialogVisible" :footer-hide="footerHide"
                       width="800" :mask-closable="false" :closable="false">
                    <div slot="header"
                         style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
                        <span style="font-size: 16px">{{$t('lang.groupSendText')}}</span>
                        <Icon type="ios-close" size="24" @click="groupSendCancel"/>
                    </div>
                    <div style="display: flex;flex-direction: row">
                        <div class="left-fifty-percent-layout">
                            <div style="display: flex;flex-direction: row;margin-bottom: 10px">
                                <el-input
                                        :placeholder="$t('lang.dialogInputQuery')"
                                        v-model="dialogQueryValue"
                                        prefix-icon="el-icon-search"
                                        size="small">
                                </el-input>
                                <el-button type="primary" size="mini"
                                           style="height: 30px !important;;width: 80px !important;margin-left: 10px;margin-right: 24px"
                                           @click="dialogChatListQuery(dialogQueryValue)">{{$t('lang.taskQuery')}}
                                </el-button>
                            </div>
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="inGroupSend"
                                         @change="handleCheckAllChange">
                                {{$t('lang.checkboxTips1')}}{{taskChatList.length}}{{$t('lang.checkboxTips2')}}{{checkedCount}}{{$t('lang.checkboxTips3')}}
                            </el-checkbox>
                            <Scroll height="440" style="width: 100%;">
                                <div style="margin: 5px 0;display: flex;justify-content: left;">
                                    <el-checkbox-group :disabled="inGroupSend" v-model="checkedTaskChatList"
                                                       @change="handleCheckedTaskChatListChange"
                                                       style="display: flex;flex-direction: column;width: 100%">
                                        <el-checkbox v-for="(item,index) in searchTaskChatList" :label="item.nickname"
                                                     :key="index"
                                                     style="align-items: center;">
                                            <div style="display: flex;flex-direction: column;width: 100%">
                                                <span style="color: #333333">{{item.nickname}}</span>
                                                <span style="color: #999999">{{item.phoneNumber}}</span>
                                                <Divider style="margin: 10px 0 10px 0;width: 320px"/>
                                            </div>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </Scroll>

                        </div>
                        <div class="right-fifty-percent-layout">
                            <Input v-model="dialogGroupSendContent" type="textarea"
                                   :disabled="dialogExcelCheck || inGroupSend"
                                   :placeholder="$t('lang.dialogInputContent')" :autosize="{minRows: 5,maxRows: 6}"/>
                            <el-checkbox v-model="dialogExcelCheck" style="margin-top: 10px">
                                {{$t('lang.dialogExcelCheckText')}}
                            </el-checkbox>
                            <div style="margin-top: 28px">
                                <span style="font-size: 14px">
                                    {{$t('lang.transmissionInterval')}}
                                </span>
                                <el-select v-model="transmissionIntervalStartTime" :disabled="inGroupSend"
                                           @change="IntervalStartTimeChange"
                                           :placeholder="$t('lang.pleaseSelect')" size="small" style="width: 105px">
                                    <el-option
                                            v-for="item in transmissionIntervalTime"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                                <span style="margin-left: 5px;margin-right: 5px">
                                    {{$t('lang.transmissionIntervalTo')}}
                                </span>
                                <el-select v-model="transmissionIntervalEndTime" :disabled="inGroupSend"
                                           @change="IntervalEndsTimeChange"
                                           :placeholder="$t('lang.pleaseSelect')"
                                           size="small" style="width: 105px">
                                    <el-option
                                            v-for="item in transmissionIntervalTime"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-top: 20px">
                                <span>
                                    {{$t('lang.dialogSendAccountText')}}
                                </span>
                                <el-select v-model="sendWhatsAppValue" multiple :disabled="inGroupSend"
                                           :placeholder="$t('lang.pleaseSelect')"
                                           size="small"
                                           style="width: 220px;margin-left: 0" :no-data-text="$t('lang.selectNoData')">
                                    <el-option
                                            v-for="item in whatsAppList"
                                            :key="item.viewId"
                                            :label="item.account"
                                            :value="item.account">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top: 20px;">
                                <el-button type="primary" :loading="inGroupSend"
                                           style="color: white;width: 140px" @click="groupSendClick">
                                    {{sendButtonText}}
                                </el-button>
                                <div v-if="inGroupSend">
                                    <span style="margin-left: 10px;font-size: 12px;color: #333333;width: 150px">{{$t('lang.sendWaitTip1')}}{{index}}{{$t('lang.sendWaitTip2')}}{{waitingToSend}}{{$t('lang.sendWaitTip3')}}{{estimatedTime}}{{estimatedTimeText}}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </Modal>

                <Modal v-model="terminationGroupSendDialogVisible" :title="$t('lang.promptText')"
                       @on-cancel="terminationGroupSendOK" :mask-closable="false">
                    <div style="margin-top: 10px">
                        <p style="margin-left: 10px;margin-right: 5px">{{$t('lang.terminationTips')}}</p>
                    </div>
                    <div slot="footer">
                        <Button @click="terminationGroupSendCancel">{{$t('lang.cancelTxt')}}</Button>
                        <Button type="error" @click="terminationGroupSendOK">{{$t('lang.terminationText')}}</Button>
                    </div>
                </Modal>

                <Modal v-model="groupSendOverDialogVisible" :title="$t('lang.sendOverTitle')">
                    <div style="margin-top: 10px;display: flex;flex-direction: column;align-items: center;justify-content: center">
                        <p style="margin-left: 10px;margin-right: 5px">{{$t('lang.sendOverContent')}}</p>
                        <p style="margin-left: 10px;margin-right: 5px">
                            {{$t('lang.sendOverTips')}}{{totalSendSize}}{{$t('lang.sendOverTips1')}}</p>
                    </div>
                    <div slot="footer">
                        <Button type="primary" @click="groupSendOverOK">{{$t('lang.sureTxt')}}</Button>
                    </div>
                </Modal>
            </el-header>
            <el-main>
                <el-table
                        ref="singleTable"
                        :data="tableSearchData"
                        style="width: 100%"
                        height="615"
                        :header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900,
                        backgroundColor: '#00000005',padding:'0',lineHeight:'54px'}"
                        :row-style="{fontSize:'14px',color:'#666',fontFamily:'MicrosoftYaHeiUI'}"
                        @row-click="tabRowClick"
                        highlight-current-row>
                    <el-table-column
                            prop="nickname"
                            :label="$t('lang.nickname')"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="phoneNumber"
                            :label="$t('lang.phoneNumber')"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="taskCode"
                            :label="$t('lang.taskTableNumber')"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="assignTime"
                            :label="$t('lang.taskTableDate')"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :label="$t('lang.taskTableOperation')"
                            width="340"
                    >
                        <template slot-scope="scope">
                            <div style="display: flex;flex-direction: row;align-items: center">
                                <div style="display: flex;flex-direction: row;align-items: center;margin-right: 10px"
                                     @click="handleClick(scope.row,scope.$index)">
                                    <div v-if="scope.row.needCommunicate">
                                        <el-image
                                                src="https://qianduohui.oss-cn-shanghai.aliyuncs.com/whatsapp-pc/ic_has_chat.png"
                                                style="width: 10px;height: 10px"/>
                                        <el-button type="text" size="small">
                                            {{$t('lang.taskChatTitle')}}
                                        </el-button>
                                    </div>
                                    <div v-else>
                                        <el-image
                                                src="https://qianduohui.oss-cn-shanghai.aliyuncs.com/whatsapp-pc/ic_no_chat.png"
                                                style="width: 10px;height: 10px"/>
                                        <el-button type="text" size="small" style="color: #999999 !important;">
                                            {{$t('lang.taskChatTitle')}}
                                        </el-button>
                                    </div>


                                </div>
                                <el-button type="text" size="small"
                                           @click="taskDialogVisibleClick(scope.$index,scope.row)">
                                    {{$t('lang.taskForwardingTaskTitle')}}
                                </el-button>
                                <el-button type="text" size="small" @click="taskDel(scope.$index,scope.row)">
                                    {{$t('lang.taskTableOperationDelete')}}
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer height="50px">
                <el-pagination
                        style="margin-top: 15px"
                        background
                        layout="prev, pager, next"
                        :total="totalListSize"
                        :page-size="pageSize"
                        :hide-on-single-page="true"
                        @prev-click="prevClick"
                        @next-click="nextClick"
                        @current-change="currentChange">
                </el-pagination>
            </el-footer>
        </el-container>
        <el-aside width="1px">
            <Divider type="vertical" style="margin: 0;height: 720px;padding: 0"/>
        </el-aside>
        <el-aside width="399px">
            <Tabs :value="taskDetail" v-model="taskDetail" style="height: 98%">
                <TabPane :label="$t('lang.taskTab1')" name="first" style="margin-top: -10px">
                    <Scroll height="650">
                        <div v-for="item in taskUserList" v-bind:key="item.key" class="item-style">
                            <p class="item-key">{{item.key}}</p>
                            <p class="item-value">{{item.value}}</p>
                        </div>
                    </Scroll>
                </TabPane>
                <TabPane :label="$t('lang.taskTab2')" name="second" style="margin-top: -10px">
                    <div style="border: 1px solid white;border-radius: 4px;background-color: white;margin: 15px 15px 0 15px">
                        <el-input
                                :placeholder="$t('lang.taskSearchRecord')"
                                v-model="recordValue"
                                prefix-icon="el-icon-search"
                                size="small"
                                style="margin: 24px 20px;width: 90%"
                                @input="recordInput(recordValue)">
                        </el-input>

                        <el-tabs v-model="activeName" @tab-click="tabClick">
                            <el-tab-pane :label="$t('lang.taskChildTab1')" name="first" style="margin-top: -20px">
                                <Scroll height="550">
                                    <div v-for="(item,index) in allRecordSearchList" v-bind:key="index"
                                         style="display: flex;flex-direction: column">
                                        <div style="display: flex;flex-direction: row">
                                            <el-image
                                                    style="width: 48px;height: 44px;border-radius: 30px;margin-top: 16px;margin-left: 16px;margin-right: 8px;"
                                                    :src="item.senderAvatar"></el-image>
                                            <div style="display: flex;flex-direction: column">
                                                <div style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 15px;margin-right: 12px">
                                                    <p style="color: #999999;font-size: 12px">
                                                        {{item.sendWhatsappAccount}}</p>
                                                    <p style="color: #999999;font-size: 12px">{{item.sendTime}}</p>
                                                </div>
                                                <p class="item-ellipsi">{{item.messageContent}}</p>
                                            </div>
                                        </div>
                                        <Divider style="margin:16px 16px 0 16px"/>

                                    </div>
                                </Scroll>
                            </el-tab-pane>
                            <el-tab-pane :label="$t('lang.taskChildTab2')" name="second" style="margin-top: -20px">
                                <Scroll height="550">
                                    <div v-for="(item,index) in fileRecordSearchList" v-bind:key="index"
                                         style="display: flex;flex-direction: column">
                                        <div style="display: flex;flex-direction: row;justify-content: space-between">
                                            <div style="display: flex;flex-direction: row;">
                                                <el-image
                                                        style="width: 48px;height: 44px;margin-top: 16px;margin-left: 16px;margin-right: 8px;"
                                                        :src="item.senderAvatar"></el-image>
                                                <div style="display: flex;flex-direction: column">
                                                    <p style="margin-top: 18px;font-size: 14px;color: #333333">
                                                        {{item.fileName}}</p>
                                                    <div style="display: flex;flex-direction: row;margin-top: 4px;text-align: left">
                                                        <p style="color: #999999;font-size: 12px">{{item.sendTime}}</p>
                                                        <p style="color: #999999;font-size: 12px;margin-left: 20px">
                                                            {{item.sendWhatsappAccount}}</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <el-button type="text" style="margin-right: 20px"
                                                       @click="downFile(index)">{{$t('lang.taskDownLoad')}}
                                            </el-button>
                                        </div>
                                        <Divider style="margin:16px 16px 0 16px"/>

                                    </div>
                                </Scroll>
                            </el-tab-pane>
                            <el-tab-pane :label="$t('lang.taskChildTab3')" name="third" style="margin-top: -20px">
                                <Scroll height="550">
                                    <div v-for="(item,index) in taskRecordPicVideoList" v-bind:key="index"
                                         style="margin: 10px 20px 0 20px">
                                        <p style="margin-bottom: 10px;color: #777777;font-size: 14px">
                                            {{item.time}}</p>
                                        <Row :gutter="10" justify="start" type="flex">
                                            <Col span="6" :order="index"
                                                 v-for="(childItem,index) in item.list"
                                                 v-bind:key="index">
                                                <div v-if="childItem.type === 1"
                                                     @click="onPlayerPlay(childItem)">
                                                    <el-image
                                                            style="width: 86px; height: 86px"
                                                            :src="childItem.face">
                                                    </el-image>
                                                </div>
                                                <div v-else-if="childItem.type === 0"
                                                     @click="imagePreview(childItem.url)">
                                                    <el-image
                                                            style="width: 86px; height: 86px"
                                                            :src="childItem.url">
                                                    </el-image>
                                                </div>

                                            </Col>
                                        </Row>
                                    </div>
                                </Scroll>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </TabPane>
            </Tabs>
            <Modal v-model="taskDialogVisible" :title="$t('lang.taskForwardingTaskTitle')"
                   @on-cancel="forwardingOnCancel">
                <div style="display: flex;flex-direction: row;align-items: center;margin-top: 10px">
                    <p style="margin-left: 10px;margin-right: 5px">{{$t('lang.taskForwardingTip')}}</p>
                    <el-select v-model="atHisTableValue" :placeholder="$t('lang.pleaseSelect')" size="small"
                               style="width: 200px;margin-left: 0">
                        <el-option
                                v-for="item in atHisTableList"
                                :key="item.adminCode"
                                :label="item.name"
                                :value="item.adminCode">
                        </el-option>
                    </el-select>
                </div>
                <div slot="footer">
                    <Button :loading="loading" type="primary" @click="forwardingAsyncOK">{{$t('lang.sureTxt')}}</Button>
                </div>
            </Modal>


            <Modal v-model="chatDialogVisible" :title="$t('lang.taskChatTitle')" @on-cancel="chatOnCancel">
                <div style="display: flex;flex-direction: row;align-items: center;margin-top: 10px">
                    <p style="margin-left: 10px;margin-right: 5px">{{$t('lang.taskChatAccountName')}}</p>
                    <el-select v-model="whatsAppValue" :placeholder="$t('lang.pleaseSelect')" size="small"
                               style="width: 200px;margin-left: 0" :no-data-text="$t('lang.selectNoData')">
                        <el-option
                                v-for="item in whatsAppList"
                                :key="item.viewId"
                                :label="item.account"
                                :value="item.viewId">
                        </el-option>
                    </el-select>
                </div>
                <div slot="footer">
                    <Button type="primary" @click="chatAsyncOK">{{$t('lang.sureTxt')}}</Button>
                </div>
            </Modal>


            <Modal v-model="taskDelDialogVisible" :title="$t('lang.taskDeleteTask')" @on-ok="taskDelete"
                   @on-cancel="deleteOnCancel" :ok-text="$t('lang.sureTxt')" :cancel-text="$t('lang.cancelTxt')">
                <span>{{$t('lang.taskDeleteTaskTip')}}</span>
            </Modal>

            <Modal v-model="imageDialogVisible" title="" :footer-hide="footerHide">
                <el-image
                        style="height: 550px;margin-top: 20px"
                        :src="imageUrl">
                </el-image>
            </Modal>

            <Modal v-model="videoDialogVisible" title="" :footer-hide="footerHide" @on-cancel="videoPause">
                <video id="vide" style="margin-top: 20px" :preload="preload"
                       :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"
                       :autoplay="autoplay" :loop="false">
                    <source :src="videoSrc" type="video/mp4">
                </video>
            </Modal>

        </el-aside>
    </el-container>
</template>

<script>
    const {ipcRenderer} = window.require("electron");
    import urlConfig from '../api/config.js'

    export default {
        name: "task",
        computed: {
            uploadData() {
                return {
                    "adminCode": localStorage.adminCode,
                    "merchantCode": localStorage.merchantCode
                }
            },
            uploadHeader() {
                return {"accessToken": localStorage.token}
            },
        },
        data() {
            return {
                uploadUrl: urlConfig + '/api/v1/task/createByExcel',
                videoSrc: '',
                videoImg: '',
                isPlay: false,
                width: '500',
                height: '550',
                preload: 'auto',
                controls: true,
                autoplay: false,
                loading: false,
                footerHide: true,

                queryValue: '',
                recordValue: '',
                totalPage: 1, // 统共页数，默认为1
                currentPage: 1, //当前页数 ，默认为1
                pageSize: 10, // 每页显示数量
                totalListSize: 0,
                tableSearchData: [],
                tableSearchAllData: [],
                tableData: [],

                activeName: 'first',
                taskDetail: 'first',
                taskDialogVisible: false,
                chatDialogVisible: false,
                taskList: [],
                taskUserList: [],
                currentTaskCode: '',
                currentTaskWA: '',
                atHisTableValue: '',
                atHisTableList: [],
                taskListDialogVisible: false,
                taskRecordAllList: [],
                allRecordSearchList: [],
                taskRecordFileList: [],
                fileRecordSearchList: [],
                taskRecordPicVideoList: [],
                videoDialogVisible: false,
                imageDialogVisible: false,
                taskDelDialogVisible: false,
                imageUrl: '',
                currentTaskListPosition: 0,
                whatsAppValue: '',
                whatsAppList: [],
                fileList: [],
                isChat: false,
                isForwarding: false,
                isDelete: false,
                welcomeText: '',

                groupSendDialogVisible: false,
                dialogQueryValue: '',
                isIndeterminate: false,
                checkAll: false,
                checkedTaskChatList: [],
                searchTaskChatList: [],
                searchTaskChatValueList: [],
                taskChatList: [],
                checkedCount: 0,
                dialogGroupSendContent: '',
                dialogExcelCheck: false,
                transmissionIntervalStartTime: '',
                transmissionIntervalEndTime: '',
                transmissionIntervalTime: [{
                    value: '1',
                    label: '1' + this.$t('lang.secondsText')
                }, {
                    value: '2',
                    label: '2' + this.$t('lang.secondsText')
                }, {
                    value: '3',
                    label: '3' + this.$t('lang.secondsText')
                }, {
                    value: '4',
                    label: '4' + this.$t('lang.secondsText')
                }, {
                    value: '5',
                    label: '5' + this.$t('lang.secondsText')
                }, {
                    value: '6',
                    label: '6' + this.$t('lang.secondsText')
                }, {
                    value: '7',
                    label: '7' + this.$t('lang.secondsText')
                }, {
                    value: '8',
                    label: '8' + this.$t('lang.secondsText')
                }, {
                    value: '9',
                    label: '9' + this.$t('lang.secondsText')
                }, {
                    value: '10',
                    label: '10' + this.$t('lang.secondsText')
                }],
                sendWhatsAppValue: [],
                inGroupSend: false,
                sendButtonText: '',
                timeout: null,
                index: 0,
                restaurants: [],
                restaurantsSize: 0,
                intervalTime: 0,
                chatContactList: [],
                noChatRecordIndex: 0,
                estimatedTime: '',
                estimatedTimeText: '',
                terminationGroupSendDialogVisible: false,
                groupSendOverDialogVisible: false,
                totalSendSize: 0,
                selectList: [],
                waitingToSend: 0
            }
        },
        methods: {
            initData() {
                this.activeName = 'first'
                this.taskDetail = 'first'
                this.taskList = []
                this.taskUserList = []
                this.atHisTableValue = ''
                this.atHisTableList = []
                this.taskRecordAllList = []
                this.allRecordSearchList = []
                this.taskRecordFileList = []
                this.fileRecordSearchList = []
                this.taskRecordPicVideoList = []
                this.imageUrl = ''
                this.fileList = []
            },
            groupSendOverOK() {
                this.totalSendSize = 0
                this.groupSendOverDialogVisible = false
            },
            groupSendCancel() {
                if (this.inGroupSend) {
                    this.terminationGroupSendDialogVisible = true
                } else {
                    this.groupSendDialogVisible = false
                    this.inGroupSend = false
                    this.checkedTaskChatList = []
                    this.checkAll = false
                    this.checkedCount = 0
                    this.restaurantsSize = 0
                    this.intervalTime = 0
                    this.chatContactList = []
                    this.noChatRecordIndex = 0
                    this.isIndeterminate = false
                    this.sendButtonText = this.$t('lang.sendTxt')
                    this.sendWhatsAppValue = []
                    this.dialogExcelCheck = false
                    this.dialogGroupSendContent = ''
                    this.transmissionIntervalStartTime = ''
                    this.transmissionIntervalEndTime = ''
                    this.waitingToSend = 0
                }
            },
            terminationGroupSendOK() {
                clearInterval(this.timeout)
                this.index = 0
                this.inGroupSend = false
                this.sendButtonText = this.$t('lang.sendTxt')
                this.groupSendDialogVisible = false
                this.dialogExcelCheck = false
                this.checkedTaskChatList = []
                this.checkAll = false
                this.dialogGroupSendContent = ''
                this.transmissionIntervalStartTime = ''
                this.transmissionIntervalEndTime = ''
                this.sendWhatsAppValue = []
                this.checkedCount = 0
                this.restaurantsSize = 0
                this.intervalTime = 0
                this.chatContactList = []
                this.noChatRecordIndex = 0
                this.terminationGroupSendDialogVisible = false
                this.isIndeterminate = false
                this.waitingToSend = 0
            },
            terminationGroupSendCancel() {
                this.terminationGroupSendDialogVisible = false
            },
            groupSendClick() {
                if (this.checkedTaskChatList.length === 0) {
                    this.$message({
                        message: this.$t('lang.dialogChatListError'),
                        type: 'warning'
                    })
                    return
                }
                if (!this.dialogExcelCheck && this.dialogGroupSendContent === '') {
                    this.$message({
                        message: this.$t('lang.dialogSendError'),
                        type: 'warning'
                    })
                    return
                }
                if (this.transmissionIntervalStartTime === '' || this.transmissionIntervalEndTime === '') {
                    this.$message({
                        message: this.$t('lang.dialogSendTimeError'),
                        type: 'warning'
                    })
                    return
                }
                if (this.sendWhatsAppValue.length === 0) {
                    this.$message({
                        message: this.$t('lang.dialogSendWAError'),
                        type: 'warning'
                    })
                    return
                }
                this.inGroupSend = true
                this.sendButtonText = this.$t('lang.sendingText')
                this.restaurants = []
                for (let i = 0; i < this.checkedTaskChatList.length; i++) {
                    for (let j = 0; j < this.searchTaskChatList.length; j++) {
                        if (this.checkedTaskChatList[i] === this.searchTaskChatList[j].nickname) {
                            this.restaurants.push(this.searchTaskChatList[j])
                            break
                        }
                    }
                }

                this.restaurantsSize = this.restaurants.length
                this.intervalTime = this.rand(this.transmissionIntervalStartTime, this.transmissionIntervalEndTime)
                this.waitingToSend = parseInt(this.restaurantsSize) - parseInt(this.index)
                let seconds = (this.restaurantsSize - this.index) * this.intervalTime
                this.estimatedTime = seconds > 60 ? Math.floor(seconds / 60) : seconds
                this.estimatedTimeText = seconds > 60 ? this.$t('lang.sendWaitTip4') : this.$t('lang.sendWaitTip5')
                let times = this.intervalTime * 1000
                let list = JSON.parse(localStorage.currentAccountList)
                this.selectList = []
                for (let i = 0; i < list.length; i++) {
                    for (let j = 0; j < this.sendWhatsAppValue.length; j++) {
                        if (this.sendWhatsAppValue[j] === list[i].account) {
                            this.selectList.push(list[i])
                        }
                    }
                }
                this.timeout = setInterval(this.play, times);
            },
            rand(min, max) {
                let a = Math.random() * (max - min)
                let b = parseInt(a) + parseInt(min)
                return Math.round(b)
            },
            play() {
                if (this.index === this.restaurants.length) {
                    clearInterval(this.timeout)
                    this.index = 0
                    this.groupSendOverDialogVisible = true
                    this.noChatRecordIndex = 0
                    this.inGroupSend = false
                    this.sendButtonText = this.$t('lang.sendTxt')
                    this.waitingToSend = 0
                    return
                }
                let currentViewId = 0
                for (let i = 0; i < this.selectList.length; i++) {
                    for (let j = 0; j < this.selectList[i].contacts.length; j++) {
                        if (this.selectList[i].contacts[j] === this.restaurants[this.index].userWhatsappAccount) {
                            currentViewId = this.selectList[i].viewId
                        }
                    }
                }
                let isMine = false
                if (currentViewId === 0) {
                    this.noChatRecordIndex = this.noChatRecordIndex % this.selectList.length
                    if (this.selectList[this.noChatRecordIndex].wid === this.restaurants[this.index].userWhatsappAccount) {
                        this.noChatRecordIndex++
                        this.noChatRecordIndex = this.noChatRecordIndex % this.selectList.length
                        if (this.selectList.length === 1) {
                            isMine = true
                        }
                    }
                    currentViewId = this.selectList[this.noChatRecordIndex].viewId
                    this.noChatRecordIndex++
                }
                if (!isMine) {
                    ipcRenderer.send('timingOpenChatAndSend', {
                        viewId: currentViewId,
                        id: this.restaurants[this.index].userWhatsappAccount,
                        content: this.dialogExcelCheck ? this.restaurants[this.index].welcome : this.dialogGroupSendContent,
                    })
                }
                this.index++
                this.totalSendSize = this.index
                this.waitingToSend = parseInt(this.restaurantsSize) - parseInt(this.index)
                let seconds = (this.restaurantsSize - this.index) * this.intervalTime
                this.estimatedTime = seconds > 60 ? Math.floor(seconds / 60) : seconds
                this.estimatedTimeText = seconds > 60 ? this.$t('lang.sendWaitTip4') : this.$t('lang.sendWaitTip5')
                currentViewId = 0
            },
            IntervalStartTimeChange(value) {
                if (this.transmissionIntervalEndTime !== '') {
                    if (value >= parseInt(this.transmissionIntervalEndTime)) {
                        this.transmissionIntervalStartTime = ''
                        this.$message({
                            message: this.$t('lang.startTimeMsg'),
                            type: 'warning'
                        })
                    }
                }
            }
            ,
            IntervalEndsTimeChange(value) {
                if (value <= parseInt(this.transmissionIntervalStartTime)) {
                    this.transmissionIntervalEndTime = ''
                    this.$message({
                        message: this.$t('lang.endsTimeMsg'),
                        type: 'warning'
                    })
                }
            }
            ,
            handleCheckAllChange(val) {
                this.checkedTaskChatList = val ? this.searchTaskChatValueList : []
                this.isIndeterminate = false
                this.checkedCount = this.checkedTaskChatList.length
            },
            handleCheckedTaskChatListChange(value) {
                this.checkedCount = value.length;
                this.checkAll = this.checkedCount === this.taskChatList.length;
                this.isIndeterminate = this.checkedCount > 0 && this.checkedCount < this.taskChatList.length;
            }
            ,
            dialogChatListQuery(queryString) {
                let restaurants = this.taskChatList
                // 调用 callback 返回建议列表的数据
                this.searchTaskChatList = restaurants.filter(function (arrayFilter) {
                    return (arrayFilter.nickname.search(queryString) !== -1 || arrayFilter.userWhatsappAccount.search(queryString) !== -1);
                })
                this.searchTaskChatValueList = []
                for (let i = 0; i < this.searchTaskChatList.length; i++) {
                    this.searchTaskChatValueList.push(this.searchTaskChatList[i].nickname)
                }

            }
            ,
            tabClick() {
                this.recordValue = ''
                this.allRecordSearchList = this.taskRecordAllList
                this.fileRecordSearchList = this.taskRecordFileList
            },
            recordInput(queryString) {
                if (this.activeName === 'first') {
                    let restaurants = this.taskRecordAllList
                    this.allRecordSearchList = restaurants.filter(function (arrayFilter) {
                        return arrayFilter.messageContent.search(queryString) !== -1;
                    })
                } else if (this.activeName === 'second') {
                    let restaurants = this.taskRecordFileList
                    this.fileRecordSearchList = restaurants.filter(function (arrayFilter) {
                        return arrayFilter.messageContent.search(queryString) !== -1;
                    })
                }

            },
            downloadExcel() {
                let a = document.createElement('a')
                a.href = "https://bus-media.oss-cn-hangzhou.aliyuncs.com/scrm/task/TaskTemplate.xlsx"
                a.click();
            },
            groupSend() {
                this.$api.getTaskListNoPage().then(res => {
                    if (res.dataList === null || res.dataList.length === 0) {
                        this.$message({
                            message: this.$t('lang.noChatSendTip'),
                            type: 'warning'
                        })
                        return
                    }
                    this.taskChatList = res.dataList
                    this.searchTaskChatList = this.taskChatList
                    this.searchTaskChatValueList = []
                    for (let i = 0; i < this.searchTaskChatList.length; i++) {
                        this.searchTaskChatValueList.push(this.searchTaskChatList[i].nickname)
                    }
                    this.groupSendDialogVisible = true
                    if (localStorage.currentAccountList !== undefined) {
                        this.whatsAppList = JSON.parse(localStorage.currentAccountList)
                    }
                    this.sendButtonText = this.$t('lang.sendTxt')

                })

            },
            recordChange() {
                this.getTaskListInit();
                // let restaurants = this.tableData
                // 调用 callback 返回建议列表的数据
                // cb(results);
                // this.tableSearchAllData = restaurants.filter(function (arrayFilter) {
                //     return (arrayFilter.userWhatsappAccount.search(queryString) !== -1 || arrayFilter.taskCode.search(queryString) !== -1);
                // })
                // this.totalListSize = this.tableSearchAllData.length
                // this.setCurrentPageData()
            }
            ,
            resetChange() {
                if (this.queryValue !== '') {
                    this.queryValue = ''
                    this.currentPage = 1
                    this.getTaskListInit()
                }
            }
            ,
            setCurrentPageData() {
                let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                if (this.queryValue === '') {
                    this.tableSearchData = this.tableData.slice(
                        begin,
                        end
                    );
                } else {
                    this.tableSearchData = this.tableSearchAllData.slice(
                        begin,
                        end
                    );
                }
            }
            ,
            prevClick(val) {
                this.currentPage = val;
                this.getTaskListNext()
            }
            ,
            nextClick(val) {
                this.currentPage = val;
                this.getTaskListNext()

            }
            ,
            currentChange(val) {
                this.currentPage = val;
                this.getTaskListNext()

            }
            ,
            handleClick(row, index) {
                if (this.currentTaskCode === row.taskCode) {
                    this.isChat = true
                }
                this.currentTaskWA = row.userWhatsappAccount
                this.welcomeText = this.tableSearchData[index].welcome
                if (localStorage.currentAccountList !== undefined) {
                    this.whatsAppList = JSON.parse(localStorage.currentAccountList)
                }
                this.chatDialogVisible = true
            }
            ,
            chatOnCancel() {
                this.isChat = false
            }
            ,
            deleteOnCancel() {
                this.isDelete = false
            }
            ,
            taskDelete() {
                this.$api.getTaskDelete({
                    taskCode: this.currentTaskCode
                }).then(() => {
                    this.$message({
                        message: this.$t('lang.taskDeleteSuccessTip'),
                        type: 'success'
                    })
                    this.tableSearchData.splice(this.currentTaskListPosition, 1)
                    this.isDelete = false
                    this.initData()
                    this.getTaskListInit()
                })
            }
            ,
            taskDel(index, row) {
                if (this.currentTaskCode === row.taskCode) {
                    this.isDelete = true
                }
                this.currentTaskListPosition = row
                this.taskDelDialogVisible = true
            }
            ,
            taskDialogVisibleClick(index, row) {
                if (this.currentTaskCode === row.taskCode) {
                    this.isForwarding = true
                }
                this.$api.getOtherAdminList({
                    adminCode: localStorage.adminCode
                }).then(res => {
                    if (res === null) return
                    this.atHisTableList = res.dataList
                    this.taskDialogVisible = true
                })
            }
            ,
            tabRowClick(row) {
                if (this.isChat === true) return
                if (this.isForwarding === true) return
                if (this.isDelete === true) return
                if (this.currentTaskCode !== row.taskCode) {
                    this.taskDetail = "first"
                    let code = row.taskCode
                    this.getTaskDetail(code)
                    this.currentTaskCode = row.taskCode
                    this.initData()
                }
            }
            ,
            videoPause() {
                let vide = document.getElementById("vide");
                if (vide.paused) {
                    vide.play();
                } else if (vide.play()) {
                    vide.pause();
                }
            }
            ,
            imagePreview(url) {
                this.imageUrl = url
                this.imageDialogVisible = true
            }
            ,
            onPlayerPlay(item) {
                this.videoSrc = item.url
                this.videoImg = item.face
                this.videoDialogVisible = true
            }
            ,
            downFile(index) {
                let url = this.fileRecordSearchList[index].downloadLink
                let name = this.fileRecordSearchList[index].fileName
                name = name.replace(/\s*/g, '')
                this.downloadByBlob(url, name)
            }
            ,
            downloadByBlob(data, name) {
                let blob = new Blob([data]);
                let url = window.URL.createObjectURL(blob);
                let aLink = document.createElement("a");
                aLink.style.display = "none";
                aLink.href = url;
                aLink.setAttribute("download", name);
                document.body.appendChild(aLink);
                aLink.click();
                document.body.removeChild(aLink); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
            }
            ,
            download(href, name) {
                let eleLink = document.createElement('a')
                eleLink.download = name
                eleLink.href = href
                eleLink.click()
                eleLink.remove()
            }
            ,
            forwardingOnCancel() {
                this.isForwarding = false
            }
            ,
            forwardingAsyncOK() {
                if (this.atHisTableValue !== '') {
                    this.loading = true
                    this.$api.getTaskTransport({
                        targetAdminCode: this.atHisTableValue,
                        taskCode: this.currentTaskCode
                    }).then(() => {
                        this.taskDialogVisible = false
                        this.isForwarding = false
                        this.loading = false
                        this.$message({
                            message: this.$t('lang.taskForwardingSuccessTip'),
                            type: 'success'
                        })
                        this.getTaskListInit()
                    })
                } else {
                    this.$message({
                        message: this.$t('lang.taskSelectTableTip'),
                        type: 'warning'
                    })
                }

            }
            ,
            chatAsyncOK() {
                if (this.whatsAppValue !== '') {
                    this.chatDialogVisible = false;

                    setTimeout(() => {
                        ipcRenderer.send("selectNewChat", {
                            viewId: this.whatsAppValue,
                            whatsApp: this.currentTaskWA,
                            wLanguage: this.welcomeText
                        })
                        this.whatsAppValue = ''
                        this.currentTaskWA = ''
                        this.welcomeText = ''
                        this.isChat = false
                    }, 500);

                } else {
                    this.$message({
                        message: this.$t('lang.taskNotLoginTip'),
                        type: 'warning'
                    })
                }
            }
            ,
            handleExceed(files) {
                this.$message.warning(this.$t('lang.taskUploadTipStart') + files.length + this.$t('lang.taskUploadTipEnd'));
            }
            ,
            handleError(err) {
                this.$refs.upload.clearFiles();
                this.$message.warning(err);
            }
            ,
            handleSuccess() {
                this.$message.warning(this.$t('lang.taskUploadSuccess'));

                this.$refs.upload.clearFiles();

                this.getTaskListInit();

            }
            ,
            getTaskListInit() {
                this.$api.getTaskList({
                    adminCode: localStorage.adminCode,
                    pageNum: this.currentPage,
                    param: this.queryValue
                }).then((response => {
                    let res = response.data
                    this.tableData = res.dataList
                    this.tableSearchData = this.tableData
                    this.totalListSize = response.page.totalCount
                    this.pageSize = response.page.pageSize
                    // 计算一共有几页
                    this.totalPage = Math.ceil(response.page.totalCount / this.pageSize);
                    // 计算得0时设置为1
                    this.totalPage = this.totalPage === 0 ? 1 : this.totalPage;
                    // this.setCurrentPageData();

                    this.getTaskDetail(res.dataList[0].taskCode)
                    this.$refs.singleTable.setCurrentRow(this.tableData[0]);
                    this.currentTaskCode = res.dataList[0].taskCode
                }))
            }
            ,
            getTaskListNext() {
                this.$api.getTaskList({
                    adminCode: localStorage.adminCode,
                    pageNum: this.currentPage,
                    param: this.queryValue
                }).then((response => {
                    let res = response.data
                    if (res === null) return
                    this.tableData = res.dataList
                    this.tableSearchData = this.tableData

                    this.getTaskDetail(res.dataList[0].taskCode)
                    this.$refs.singleTable.setCurrentRow(this.tableData[0]);
                    this.currentTaskCode = res.dataList[0].taskCode
                }))
            }
            ,
            getTaskDetail(code) {
                this.$api.getTaskDetail({
                    taskCode: code
                }).then(res => {
                    this.taskUserList = res.taskMission
                    this.getChatRecord(code)
                })
            }
            ,
            getChatRecord(code) {
                this.$api.getTaskAllTypeMessage({
                    taskCode: code,
                    pageNum: 1,
                    pageSize: 100
                }).then(res => {
                    if (res === null) return
                    this.taskRecordAllList = res.dataList
                    this.allRecordSearchList = this.taskRecordAllList
                })
                this.$api.getTaskFileMessage({
                    taskCode: code,
                    pageNum: 1,
                    pageSize: 100
                }).then(res => {
                    if (res === null) return
                    this.taskRecordFileList = res.dataList
                    this.fileRecordSearchList = this.taskRecordFileList
                })

                this.$api.getTaskImageAndVideoMessage({
                    taskCode: code,
                    pageNum: 1,
                    pageSize: 100
                }).then(res => {
                    if (res === null) return
                    this.taskRecordPicVideoList = res.dataList
                })
            }
        },
        created() {
            if (this.$i18n.locale !== localStorage.langValue) {
                this.$i18n.locale = localStorage.langValue
            }
        },
        mounted() {
            this.getTaskListInit()
        }
    }
</script>

<style>
    .left-fifty-percent-layout {
        width: 50%;
        display: flex;
        flex-direction: column;
    }

    .right-fifty-percent-layout {
        width: 50%;
        display: flex;
        flex-direction: column;
        background-color: #F5F5F5;
        padding: 10px;
    }

    .item-ellipsi {
        font-size: 16px;
        color: #333333;
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 2px;
    }

    .item-style {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        margin-right: 15px;
    }

    .button-save {
        width: 64px !important;
        margin-top: 4px;
        margin-left: 15px;
        color: white;
        outline: 0;
    }

    .item-key {
        color: #333333;
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .item-value {
        color: #333333;
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 500;
        background-color: white;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        padding: 5px 10px;
    }

    .ivu-tabs-nav {
        background-color: white;
        width: 100%;
    }

    .ivu-tabs-tab {
        padding: 20px 16px !important;
        margin-right: 16px;
    }

    .el-tabs__item {
        width: 32% !important;
        text-align: center !important;
    }

    .el-tabs__nav-wrap::after {
        height: 1px !important;
        background-color: #E6E6E6 !important;
    }

    .el-tabs__active-bar {
        height: 3px !important;
    }

    .el-header, .el-footer {
        color: #333;
        text-align: center;
        line-height: 50px;
        align-items: center;
        background-color: white;
    }

    .el-aside {

    }

    .el-main {
        background-color: #F5F5F5;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
        height: 760px;
        background-color: #F5F5F5;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>